<template>
    <div>
        <h2>当前求和为:{{$store.state.count}}</h2>
        <!-- <h4>求和值放大10倍查看:{{$store.getters.ncount}}</h4> -->
        <h4>求和值放大10倍查看:{{ncount}}</h4>
        <!-- <h4>{{sclName}},{{stuName}},{{smlName}}</h4> -->
        <h4>{{schoolName}},{{studentName}},{{smallName}}</h4>
        <div>
            <select :value="x">
                <option value=1>1</option>
                <option value=2>2</option>
                <option value=3>3</option>
            </select>
            <button @click="add">+</button>
            <button @click="reduce">-</button>
            <button @click="oddAdd">当前求和为奇数再加</button>
            <button @click="waitAdd">等一等再加</button>
        </div>
        
    </div>
</template>
<script>
    import {mapState,mapGetters} from 'vuex'

    export default {
        name:'App',
        // 此时count 需要放到vuex的state中 因为是多组件需要使用
        data() {
            return {
                x:1,
            }
        },
        computed:{
            // sclName(){
            //     return this.$store.state.schoolName
            // },
            // stuName(){
            //     return this.$store.state.studentName
            // },
            // smlName(){
            //     return this.$store.state.smallName
            // }

            // 下面这种写法是上面那种写法的简写，是vuex提供的一种数据映射方法， 
            // ...mapState({sclName:'schoolName',stuName:'studentName',smlName:'smallName'})

            //还有一种数组的写法
            ...mapState(['schoolName','studentName','smallName']),

            // ...mapGetters({ncount:'ncount'})

            ...mapGetters(['ncount'])
        },
        methods: {
            add(){
                // this.$store.dispatch('jia',this.x)
                this.$store.commit('JIA',this.x)
                //业务逻辑简单可以直接使用commit来实现，但是不要直接在这里通过$store.state来修改数据，这里修改的话devtool就检测不到了
                //另外dispatch可以重复派遣，每一段分别实现不同的业务逻辑
            },
            reduce(){
                this.$store.dispatch('jian',this.x)
                
            },
            oddAdd(){
                this.$store.dispatch('oddAdd',this.x)
            },
            waitAdd(){
                this.$store.dispatch('waitAdd',this.x)
            }
        },
        mounted() {
            // vc上成功挂载$store属性
            //console.log(this)

            
        },
    }
</script>
<style>
    
</style>